{% extends 'base.html' %}
{% block css%}

<style type="text/css">
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            position: relative;
            min-height: 1px;
            padding-right: 3px;
            padding-left: 1px;
    }
</style>
{% endblock %}
{% block body%}
<div class="row">
    <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              <div id="container1" style="width: 350px;height:280px;margin: 0 auto;"></div>
            </div>
          </div>
    </div>
    <div class="col-md-3">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            <div id="container2" style="width: 350px;height:280px;margin: 0 auto;"></div>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
           <div id="container3" style="width: 350px;height:280px;margin: 0 auto;"></div>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            <div id="container4" style="width: 350px;height:280px;margin: 0 auto;"></div>
          </div>
        </div>
      </div>
</div>


<div class="row">
    <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              <div id="container5" style="width: 350px;height:280px;margin: 0 auto;"></div>
            </div>
          </div>
    </div>

    <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              <div id="container6" style="width: 720px;height:280px;margin: 0 auto;"></div>
            </div>
          </div>
    </div>


    <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              <div id="container7" style="width: 350px;height:280px;margin: 0 auto;"></div>
            </div>
          </div>
    </div>
  </div>


{% endblock %}
{% block js%}
{{ super() }}
<script type="text/javascript">
    function container1_render()
    {
        var dom = document.getElementById("container1");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                title: {
                    text: 'DATA1',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2011', '2012']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['D1', 'D2', 'D3', 'D4', 'D5', 'D(M)']
                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: [18, 23, 29, 104, 131, 630]
                    },
                    {
                        name: '2012',
                        type: 'bar',
                        data: [19, 23, 31, 121, 134, 681]
                    }
                ]
            };
            // ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }

    function container2_render()
    {
        var dom = document.getElementById("container2");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                title: {
                    text: 'DATA2',
                    subtext: ''
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {}
                }]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }

    function container3_render()
    {
        var dom = document.getElementById("container3");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                title: {
                    text: 'DATA3'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    right: 10,
                    data: ['D1', 'D2', 'D3']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        //saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'D1',
                        type: 'line',
                        stack: 'TOTAL',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'D2',
                        type: 'line',
                        stack: 'TOTAL',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'D3',
                        type: 'line',
                        stack: 'TOTAL',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }

    function container4_render()
    {
        var dom = document.getElementById("container4");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                title: {
                    text: 'DATA4'
                },
                // tooltip: {
                //     formatter: '{a} <br/>{b} : {c}%'
                // },
                // toolbox: {
                //     feature: {
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                series: [
                    {
                        name: 'D1',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: 50, name: 'RATE'}]
                    }
                ]
            };

            setInterval(function () {
                option.series[0].data[0].value = (Math.random() * 100).toFixed(1) - 0.0;
                myChart.setOption(option, true);
            },6000);
            ;

            // option.series[0].data[0].value = (Math.random() * 100).toFixed(1) - 0.0;
            // myChart.setOption(option, true);

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }


    function container5_render()
    {
        var dom = document.getElementById("container5");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                title: {
                    text: 'DATA5'
                },
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                // },
                legend: {
                    // orient: 'vertical',
                    right: 10,
                    data: ['D1', 'D2', 'D3', 'D4']
                },
                series: [
                    {
                        name: 'TYPE',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 335, name: 'D1'},
                            {value: 310, name: 'D2'},
                            {value: 234, name: 'D3'},
                            {value: 148, name: 'D4'}
                        ]
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }

    function container6_render()
    {
        var dom = document.getElementById("container6");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            function randomData() {
                now = new Date(+now + oneDay);
                value = value + Math.random() * 21 - 10;
                return {
                    name: now.toString(),
                    value: [
                        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                        Math.round(value)
                    ]
                };
            }

            var data = [];
            var now = +new Date(1997, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var value = Math.random() * 1000;
            for (var i = 0; i < 500; i++) {
                data.push(randomData());
            }

            option = {
                title: {
                    text: 'DATA6'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data
                }]
            };

            setInterval(function () {

                for (var i = 0; i < 5; i++) {
                    data.shift();
                    data.push(randomData());
                }

                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }, 8000);;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }

    function container7_render()
    {
        var dom = document.getElementById("container7");
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;

            // var dataCount = 5e5;
            var dataCount = 50;
            var data = generateData(dataCount);

            var option = {
                title: {
                    text: 'DATA7'
                },
                // title: {
                //     text: echarts.format.addCommas(dataCount) + ' Data',
                //     left: 10
                // },
                // toolbox: {
                //     feature: {
                //         dataZoom: {
                //             yAxisIndex: false
                //         },
                //         saveAsImage: {
                //             pixelRatio: 2
                //         }
                //     }
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    bottom: 90
                },
                dataZoom: [{
                    type: 'inside'
                }, {
                    type: 'slider'
                }],
                xAxis: {
                    data: data.categoryData,
                    silent: false,
                    splitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }
                },
                yAxis: {
                    splitArea: {
                        show: false
                    }
                },
                series: [{
                    type: 'bar',
                    data: data.valueData,
                    // Set `large` for large data amount
                    large: true
                }]
            };

            function generateData(count) {
                var baseValue = Math.random() * 1000;
                var time = +new Date(2011, 0, 1);
                var smallBaseValue;

                function next(idx) {
                    smallBaseValue = idx % 30 === 0
                        ? Math.random() * 700
                        : (smallBaseValue + Math.random() * 500 - 250);
                    baseValue += Math.random() * 20 - 10;
                    return Math.max(
                        0,
                        Math.round(baseValue + smallBaseValue) + 3000
                    );
                }

                var categoryData = [];
                var valueData = [];

                for (var i = 0; i < count; i++) {
                    categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
                    valueData.push(next(i).toFixed(2));
                    time += 1000;
                }

                return {
                    categoryData: categoryData,
                    valueData: valueData
                };
            }
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }


    $(document).ready(function(){
            // todo ...
            container1_render();
            container2_render();
            container3_render();
            container4_render();
            container5_render();
            container6_render();
            container7_render();
        });

</script>
{% endblock %}